<template>
    <view class="order-item  bg-ff m-20 borderRadius-10 ">
        <view class="header flex-row jc-between ai-center border-bottom p-20">
            <view class="size-24 color-6 flex-row ai-center">
                <image src="/static/default-avatar.jpg" style="width: 50rpx;height: 50rpx;border-radius: 20px;" mode="">
                </image>
                <view class="m-left-10">
                    <view>{{orderItem.shop_info.shop_name}}</view>
                    <view class="color-9">{{orderItem.created_at}}</view>
                </view>
            </view>
            <view class="size-28 font-bold" style="color: #F82727;">{{orderItem.status|initStatusZh}}</view>
        </view>
        <view class="goods-container p-20">
            <view class="goods-item flex-row m-botoom-20 " v-for="(goodsItem,goodsIndex) in  orderItem.goods"
                :key="goodsIndex">
                <image :src="goodsItem.imageUrl" style="width: 120rpx;height: 120rpx;border-radius: 20rpx;" mode="">
                </image>
                <view class="flex-2 m-left-20 flex-colum jc-between">
                    <view class="size-28 color-0">{{goodsItem.name}}</view>
                    <view class="color-6 size-24">
                        方法：{{goodsItem.option_type|initOptionTypeZh}}
                    </view>
                    <view class="flex-row jc-between">
                        <text class="size-32 font-bold" style="color: #F82727;"><text
                                class="size-24">￥</text>{{goodsItem.dis_price}}</text>
                        <text>x{{goodsItem.quantity}}</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="order-btn-area p-left-20 p-right-20 p-botoom-20 flex-row ai-center jc-between size-24">
            <view class="color-9">共计{{totalQuantity}}件：￥{{total}}</view>
            <view>
                <g-button style="margin:0 5px" size="mini" type="effect"
                    @click="$f.jumpUrl('/pagesOrder/order/detail?id='+orderItem.id+'&&status='+orderItem.status)">查看详情
                </g-button>
                <g-button style="margin:0 5px" v-if="orderItem.status==0||orderItem.status==1" size="mini" type="effect"
                    @click="cancelOrder()">取消</g-button>
                <g-button style="margin:0 5px" v-if="orderItem.status==0" size="mini" type="effect"
                    @click="$f.jumpUrl('/pages/payment/index?pay_no='+orderItem.pay_no)">立即付款</g-button>
                <g-button style="margin:0 5px" v-if="orderItem.status==1" size="mini" type="effect"
                    @click="openAddressEdit=true">修改地址</g-button>

                <g-button style="margin:0 5px" v-if="orderItem.status==2" size="mini" type="effect"
                    @click="$f.jumpUrl('#')">骑手位置</g-button>
                <g-button style="margin:0 5px" v-if="orderItem.status==3" size="mini" type="effect"
                    @click="$f.jumpUrl('/pagesOrder/order/comment')">评价</g-button>
                <!--           <g-button style="margin:0 5px" v-if="orderItem.status==3" size="mini" type="effect"
                    @click="$f.jumpUrl('/pagesOrder/order/comment')">再来一单</g-button> -->
                <g-button style="margin:0 5px" v-if="orderItem.status==3" size="mini" type="effect"
                    @click="$f.jumpUrl('/pagesOrder/order/refund')">申请退款</g-button>
                <g-button style="margin:0 5px" v-if="orderItem.status==4" size="mini" type="effect"
                    @click="openPlan=true">查看进度</g-button>

            </view>
        </view>
        <u-popup mode="bottom" v-model="openAddressEdit" borderRadius="16" closeable>
            <view class="text-center size-30 " style="padding: 25rpx 0;">
                修改收货地址
            </view>
            <view class="editAddress-container p-20  size-24">
                <view class="p-20" style="border: 1px solid #eee;">
                    收货地址：{{orderItem.address_info.province}}-{{orderItem.address_info.city}}-{{orderItem.address_info.district}}
                    {{orderItem.address_info.address}}
                    {{orderItem.address_info.name}}
                    {{orderItem.address_info.phone}}
                </view>
                <view class="lump flex-row m-10 p-10  ai-center color-6">
                    <text style="width: 20%;">收货人：</text>
                    <input class="border-bottom flex-2 p-10" v-model="orderItem.address_info.name"
                        placeholder="请输入收货人" />
                </view>
                <view class="lump flex-row m-10 p-10  ai-center color-6">
                    <text style="width: 20%;">联系电话：</text>
                    <input class="border-bottom flex-2 p-10" v-model="orderItem.address_info.phone"
                        placeholder="请输入联系电话" />
                </view>
                <view class="lump flex-row m-10 p-10  ai-start color-6 ">
                    <text style="width: 20%;">详细地址：</text>
                    <textarea class="border-bottom flex-2 p-10" v-model="orderItem.address_info.address"
                        placeholder="请输入详细地址" style="height: 100rpx;" />
                </view>

                <g-button type="primary" size="large" round>提交修改</g-button>
            </view>
        </u-popup>
        <u-popup mode="bottom" v-model="openPlan" borderRadius="16" closeable>
            <view class="text-center size-30 " style="padding: 25rpx 0;">
                查看进度
            </view>
            <view class=" p-20">
               <time-axis :dataArray="dataArray"></time-axis> 
            </view>
        </u-popup>
    </view>
</template>

<script>
    export default {
        props: {
            orderItem: Object,

        },
        data() {
            return {
                openAddressEdit: false,
                openPlan: false,
                dataArray: [{
                    time: '2021-09-10',
                    title: '退款申请中',
                    content: '退款理由：222',
                    type:1,/*1：成功 0：拒绝*/
                    
                },
                {
                    time: '2021-09-21',
                    title: '商家审核',
                    content: '同意理由：222',
                    type:1,/*1：成功 0：拒绝*/
                },
                {
                    time: '2021-09-21',
                    title: '平台审核',
                    content: '拒绝理由：理由不充分',
                    type:0,/*1：成功 0：拒绝*/
                },
                ]
            }
        },
        computed: {
            total() {
                if (!this.orderItem || this.orderItem.goods.length == 0) {
                    return
                }
                let total = 0
                this.orderItem.goods.map((goodsItem) => {
                    total = Number(goodsItem.dis_price) + total
                })
                return total
            },
            totalQuantity() {
                if (!this.orderItem || this.orderItem.goods.length == 0) {
                    return
                }
                let quantity = 0
                this.orderItem.goods.map((goodsItem) => {
                    quantity = Number(goodsItem.quantity) + quantity
                })
                return quantity
            }
        },
        methods: {
            cancelOrder() {
                this.$f.toast('取消成功')
            }
        },
        filters: {
            initStatusZh(value) {
                switch (value) {
                    case 0:
                        return '待付款';
                    case 1:
                        return '待配送';
                    case 2:
                        return '配送中';
                    case 3:
                        return '已送达';
                    case 4:
                        return '已退款';
                    default:
                        break;
                }
            },
            initOptionTypeZh(value) {
                switch (value) {
                    case 1:
                        return '商家备菜';
                    case 2:
                        return '商家制作';
                    case 3:
                        return '原料加工';
                    case 4:
                        return '原料不加工';
                    default:
                        break;
                }
            },
        }
    }
</script>

<style lang="scss">
    .order-item {}

    .editAddress-container {
        .lump {}
    }
</style>
